<template>
    <div>
        <input type="text" placeholder="请输入关键词">
        <input type="button" value="查询" @click="btnQuery">
        <input type="button" value="新增" @click="btnAdd">
    </div>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>书名</th>
                <th>作者</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in bookList" :key="item.id">
                <td>{{ item.id}}</td>
                <td>{{ item.bookName }}</td>
                <td>{{ item.author }}</td>
                <td>
                    <input type="button" value="编辑" @click="btnEdit(item.id)">
                    <input type="button" value="删除" @click="btnDel(item.id)">
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup>
import { Delit, Gitit } from "@/api/bookApi";
import { reactive, ref,onMounted} from "vue"
import { useRouter } from "vue-router"

let router = useRouter()

let bookList = reactive([])

function btnAdd() {
    console.log('新增');
    router.push('/bookAdd')
}
function btnQuery() {
    console.log('查找');

}
function btnDel(id) {
    console.log('删除');
    if(confirm('确定要删除吗？')){
        Delit(id)
        let itx=bookList.findIndex(item=>item.id==id)
        bookList.splice(itx,1)
    }
}
function btnEdit(id) {
    console.log('修改');
    router.push(`/bookEdit/${id}`)
}
 onMounted(async()=>{
    let res=await Gitit()
    bookList.push(...res.data)
 })
</script>